<template>
  <div class="resize-active" ref="resizeTarget">
    <div class="guide"></div>
    <div 
        class="resize-top" 
        @mousedown.stop="$event=>{mousedownHanlder($event,'top')}"
    ></div>
    <div 
        class="resize-rightTop"
        @mousedown.stop="$event=>{mousedownHanlder($event,'rightTop')}"
    ></div>
    <div
        class="resize-right"
        @mousedown.stop="$event=>{mousedownHanlder($event,'right')}"
    ></div>
    <div 
        class="resize-rightBottom"
        @mousedown.stop="$event=>{mousedownHanlder($event,'rightBottom')}"
    ></div>
    <div 
        class="resize-bottom"
        @mousedown.stop="$event=>{mousedownHanlder($event,'bottom')}"
    ></div>
    <div 
        class="resize-leftBottom"
        @mousedown.stop="$event=>{mousedownHanlder($event,'leftBottom')}"
    ></div>
    <div 
        class="resize-left" 
        @mousedown.stop="$event=>{mousedownHanlder($event,'left')}"
    ></div>
    <div 
        class="resize-leftTop"
        @mousedown.stop="$event=>{mousedownHanlder($event,'leftTop')}"
    ></div>
  </div>
</template>

<script setup>
import {defineEmits, ref, onMounted, nextTick} from 'vue'
import { onClickOutside } from '@vueuse/core'
const resizeTarget = ref(null)
const allowResize = ref(false)
const xStart = ref(0)
const yStart = ref(0)
const diffX = ref(0) //x轴偏移
const diffY = ref(0) //y轴偏移
const activeType = ref()
const emits = defineEmits(['close','resize'])
// 关闭
const closeHanlder = ()=> {
    emits('close')
}
// 鼠标点击
const mousedownHanlder = (event, type) => {
    allowResize.value = true
    activeType.value = type
    diffX.value = 0
    diffY.value = 0
    xStart.value = event.clientX
    yStart.value = event.clientY
    window.addEventListener('mousemove',(event)=>mousemoveHanlder(event,activeType.value))
}
// 鼠标移动
const mousemoveHanlder = (event, type) => {
    if(!allowResize.value) return
    let obj = {
        diffX: 0,
        diffY: 0,
        type: type
    }
    switch(type){
        case 'left':
            diffX.value = xStart.value - event.clientX
            diffY.value = 0
            obj = {
                diffX: diffX.value,
                diffY: diffY.value,
                type: type
            }
            
            emits('resize',obj)
            break
        case 'right':
            diffX.value = xStart.value - event.clientX
            diffY.value = 0
            obj = {
                diffX: diffX.value,
                diffY: diffY.value,
                type: type
            }
            emits('resize',obj)
            break
        case 'top':
            diffX.value = 0
            diffY.value = yStart.value - event.clientY
            obj = {
                diffX: diffX.value,
                diffY: diffY.value,
                type: type
            }
            emits('resize',obj)
            break
        case 'bottom':
            diffX.value = 0
            diffY.value = yStart.value - event.clientY
            obj = {
                diffX: diffX.value,
                diffY: diffY.value,
                type: type
            }
            emits('resize',obj)
            break
        case 'rightBottom':
            diffX.value = xStart.value - event.clientX
            diffY.value = yStart.value - event.clientY
            obj = {
                diffX: diffX.value,
                diffY: diffY.value,
                type: type
            }
            emits('resize',obj)
            break
        case 'leftBottom':
            diffX.value = xStart.value - event.clientX
            diffY.value = yStart.value - event.clientY
            obj = {
                diffX: diffX.value,
                diffY: diffY.value,
                type: type
            }
            emits('resize',obj)
            break
        case 'leftTop':
            diffX.value = xStart.value - event.clientX
            diffY.value = yStart.value - event.clientY
            obj = {
                diffX: diffX.value,
                diffY: diffY.value,
                type: type
            }
            emits('resize',obj)
            break
        case 'rightTop':
            diffX.value = xStart.value - event.clientX
            diffY.value = yStart.value - event.clientY
            obj = {
                diffX: diffX.value,
                diffY: diffY.value,
                type: type
            }
            emits('resize',obj)
            break
            
    }
    window.addEventListener('mouseup',(event)=>mouseupHanlder())
}
// 鼠标抬起
const mouseupHanlder = () => {
    allowResize.value = false
    diffX.value = 0
    diffY.value = 0
    xStart.value = 0
    yStart.value = 0
    window.removeEventListener('mousemove',(event)=>mousemoveHanlder(event,activeType.value))
}
onMounted(()=> {
    setTimeout(()=> {
        window.addEventListener('mousedown',(e)=> {
            onClickOutside(resizeTarget, (event) => {
                closeHanlder()
            })
        })
        
    },100)
})
</script>

<style lang="scss" scoped>
.resize-active{
    width: calc(100% - 12px);
    height: calc(100% - 12px);
    position: absolute;
    border: 1px solid red;
    padding: 5px;
    top: 0;
    left: 0;
}
.resize-top {
    position: absolute;
    width: 30px;
    height: 7px;
    top: -3px;
    left: calc(50% - 15px);
    background: #ccc;
    border-radius: 5px;
    cursor: n-resize;
}
.resize-bottom {
    position: absolute;
    width: 30px;
    height: 7px;
    bottom: -3px;
    left: calc(50% - 15px);
    background: #ccc;
    border-radius: 5px;
    cursor: n-resize;
}
.resize-left {
    position: absolute;
    width: 30px;
    height: 7px;
    bottom: -3px;
    left: -3px;
    background: #ccc;
    border-radius: 5px;
    cursor: n-resize;
}
.resize-left {
    position: absolute;
    width: 7px;
    height: 30px;
    bottom: calc(50% - 15px);
    left: -3px;
    background: #ccc;
    border-radius: 5px;
    cursor: e-resize;
}
.resize-right {
    position: absolute;
    width: 7px;
    height: 30px;
    bottom: calc(50% - 15px);
    right: -4px;
    background: #ccc;
    border-radius: 5px;
    cursor: e-resize;
}
.resize-rightTop {
    height: 20px;
    width: 20px;
    background: #ccc;
    border-radius: 9px;
    position: absolute;
    top: -10px;
    right: -10px;
    cursor: ne-resize;
}
.resize-leftTop {
    height: 20px;
    width: 20px;
    background: #ccc;
    border-radius: 9px;
    position: absolute;
    top: -10px;
    left: -10px;
    cursor: nw-resize;
}
.resize-leftBottom {
    height: 20px;
    width: 20px;
    background: #ccc;
    border-radius: 9px;
    position: absolute;
    bottom: -10px;
    left: -10px;
    cursor: ne-resize;
}
.resize-rightBottom {
    height: 20px;
    width: 20px;
    background: #ccc;
    border-radius: 9px;
    position: absolute;
    bottom: -10px;
    right: -10px;
    cursor: nw-resize;
}
</style>